{% extends "base.html" %}

{% block content %}
<div class="attributes-container">
    <table>
        <thead>
            <tr>
                <th>客户编号</th>
                <th>客户名称</th>
                <th>客户简称</th>
                <th>地址</th>
                <th>公司电话</th>
                <th>邮件</th>
                <th>联系人</th>
                <th>联系人电话</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody id="customer-table-body">
        </tbody>
    </table>
</div>

<div class="pagination">
    <button id="prev-page">上一页</button>
    <span id="page-info"></span>
    <button id="next-page">下一页</button>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let currentPage = 1;
        const perPage = 10;

        function fetchSuppliers(page) {
            fetch(`/api/suppliers?page=${page}&per_page=${perPage}`)
                .then(response => response.json())
                .then(data => {
                    const tableBody = document.getElementById('customer-table-body');
                    tableBody.innerHTML = '';
                    data.suppliers.forEach(customer => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${customer.客户编号}</td>
                            <td>${customer.客户名称}</td>
                            <td>${customer.客户简称}</td>
                            <td>${customer.地址}</td>
                            <td>${customer.公司电话}</td>
                            <td>${customer.邮件}</td>
                            <td>${customer.联系人}</td>
                            <td>${customer.联系人电话}</td>
                            <td>${customer.备注}</td>
                        `;
                        tableBody.appendChild(row);
                    });

                    document.getElementById('page-info').textContent = `第 ${data.current_page} 页，共 ${data.pages} 页`;

                    document.getElementById('prev-page').disabled = data.current_page === 1;
                    document.getElementById('next-page').disabled = data.current_page === data.pages;
                }).catch(error => {
                    console.error('Error:', error);
                });
        }

        document.getElementById('prev-page').addEventListener('click', function() {
            if (currentPage > 1) {
                currentPage--;
                fetchSuppliers(currentPage);
            }
        });

        document.getElementById('next-page').addEventListener('click', function() {
            currentPage++;
            fetchSuppliers(currentPage);
        });

        fetchSuppliers(currentPage);
    });
</script>
{% endblock %}
